// 实现四张图片自动播放，并添加左右按钮控制
// 实现思路：
// 1. 定义一个变量index，初始值为0，表示当前显示的图片索引
// 2. 定义一个ul元素，用于显示图片
// 3. 定义四个circle元素，用于显示圆点
// 4. 定义两个按钮left和right，用于控制图片切换
// 5. 定义一个函数setCircle，用于设置圆点的样式
// 6. 定义一个函数，用于切换图片，并设置圆点样式
// 7. 在window.onload事件中，初始化ul元素的样式，设置圆点样式，并显示第一张图片
// 8. 给left和right按钮添加点击事件，分别调用函数切换图片，并设置圆点样式
// 9. 定义一个函数showImg，用于显示图片，并设置图片的src和alt属性
// 10. 在showImg函数中，创建img元素，设置src属性为images/${index + 1}.jpg，设置alt属性为图片${index + 1}，并将img元素添加到ul元素中
window.onload = function () {
  let index = 0;

  let ul = document.querySelector(".wrap ul");
  let circles = document.getElementsByClassName("circle");
  setCircle(index);
  let left = document.querySelector(".left");
  let right = document.querySelector(".right");

  right.addEventListener("click", function () {
    if (index >= 3) {
      index = 0;
    } else {
      index++;
    }
    setCircle(index);
    showImg(index);
  });

  left.addEventListener("click", function () {
    if (index <= 0) {
      index = 3;
    } else {
      index--;
    }
    setCircle(index);
    showImg(index);
  });

  setInterval(function () {
    if (index >= 3) {
      index = 0;
    } else {
      index++;
    }
    setCircle(index);
    showImg(index);
  }, 2000);

  function showImg(index) {
    ul.style.transform = `translateX(-${400 * index}px)`;
  }

  function setCircle(idx) {
    for (let i = 0; i < circles.length; i++) {
      if (i === idx) {
        circles[i].classList.add("selected");
      } else {
        circles[i].classList.remove("selected");
      }
    }
  }
};
